<template>
	<!-- 提现 -->
	<view class="container">
		<header-title title="提现" :titleBold='true' :isBack="false" :isFixed="true"
			:background="{backgroundColor:'#fff'}" rightContent="提现" :right-icon="rightIcon"
			@selectRightIconChange="selectRightIconChange"></header-title>

		<uni-search-bar style="background-color: #fff;flex: 1;" @confirm="getDataList" v-model="keyword"
			@clear="getDataList"></uni-search-bar>
		<view class="content">
				<scroll-view class="scroll" style="width: 100%;" scroll-y="true" :show-scrollbar="false"
					@scrolltolower="lower">
					<view class="merchant" v-for="item in collectionListData" :key="item.Id">
						<view class="bank">
							北京银行
						</view>
						<view class="flexBox">
							<view class="">
								日期：2023-07-13
							</view>
							<view class="">
								金额：￥10000.00
							</view>
						</view>
						<view class="">
							客户：汇佳上第摩码幼儿园
						</view>
						<view class="flexBox">
							<view class="">
								提现金额：￥10000.00
							</view>
						</view>
					</view>
					<!-- 上拉显示更多 -->
					<view class="" style="padding-bottom: 50rpx;">
						<uniLoadMore :status="status" :contentText="contentText" :rows="collectionListData"></uniLoadMore>
					</view>
				</scroll-view>
			</view>
		</view>
</template>

<script>
	// 引入加载更多
	import uniLoadMore from '@/components/uni-load-more.vue'
	// 引入顶部navbar组件
	import headerTitle from '@/components/header/header-title.vue'
	export default {
		components: {
			headerTitle,
			uniLoadMore
		},
		data() {
			return {
				// 加载状态
				status: "loading",
				contentText: {
					contentdown: '',
					contentrefresh: '加载中',
					contentnomore: '没有更多了'
				},
				pagination: {
					PageIndex: 1,
					PageRows: 10,
					SortField: "CreateTime",
					SortType: "desc",
				},
				Total: 0,
				// 体现列表数据
				collectionListData:[],
				// 顶部导航栏得右侧图标
				rightIcon: require('@/static/withdraw/withdraw.png'),
				keyword: ''
			}
		},
		onShow() {
			this.collectionListData = []
			this.pagination.PageIndex = 1
			// 获取客户列表数据
			this.getCollectionListData()
		},
		// 下拉刷新
		onPullDownRefresh() {
			// 重置相关参数
			// 加载
			this.status = "loading"
			this.collectionListData = []
			this.pagination.PageIndex = 1
			// 重新获取查询数据
			this.getCollectionListData()
			uni.stopPullDownRefresh(); //停止刷新
		},
		methods: {
			// 触底
			lower(e) {
				console.log('触底了')
				if (this.collectionListData.length >= this.Total) {
					this.status = "noMore"
					return
				}
				this.getCollectionListData()
			},
			getCollectionListData(){
				this.status="loading"
				this.$http('post', '/BO/BIlling/GetBillingData', {
					...this.pagination,
					Search: {
						CommpayId: "1620979870186082305",
						Condition: "cCusName",
						EndTime: "",
						Keyword: "",
						StartTime: ""
					}
				}).then(res => {
					if (res.Success) {
						console.log('获取客户列表数据', res.Data)
						// 赋值总条数
						this.Total = res.Total
						if (res.Data.length == 0) {
							this.status = "noMore"
							return
						}
						if (this.pagination.PageIndex == 1) {
							this.collectionListData = res.Data
							this.pagination.PageIndex += 1
						} else {
							this.collectionListData = this.collectionListData.concat(res.Data)
							this.pagination.PageIndex += 1
				
						}
						uni.stopPullDownRefresh(); //停止刷新
						if (this.pagination.PageRows * this.pagination.PageIndex > this.Total) {
							// 暂停加载  没有更多了
							this.status = "noMore"
							return
						}
					} else this.$api.msg(res.Msg)
				})
			},
			// 顶部导航栏右侧图标按钮
			selectRightIconChange() {
				console.log('提现',)
				this.$pageUrl('navigateTo', '/pages/collection/collectionForm')
			},
			toWithdraw() {

			},
		}
	}
</script>

<style scoped lang="scss">
	.container{
		.content {
			.scroll {
				// 兼容H5和APP
				/* #ifdef H5 */
				height: calc(100vh - 165px);
				/* #endif */
				/* #ifdef APP */
				height: calc(100vh - 235px);
				/* #endif */
			}
			.pay {
				color: #333;
				font-weight: bold;
				font-size: 16px;
				background: rgba(255, 255, 255, .3);
				margin: 10px;
				border-radius: 5px;
				padding: 5px 10px;
			}
			
			.flexBox {
				view {
					flex: 1;
				}
			}
			
			.merchant {
				background-color: rgba(255, 255, 255, .9);
				border-radius: 10px;
				box-shadow: 1px 1px 5px #ccc;
				box-sizing: border-box;
				padding: 20rpx;
				margin: 10px;
			
				.bank {
					font-weight: bold;
				}
			
				.iconBox {
					color: #5cabfd;
					text-align: right;
			
					img {
						width: 18px;
						vertical-align: middle;
						margin-right: 5px;
					}
				}
			}
		}
	}
</style>